<template>
  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
        <div class="text">
          <p class="title007">专业信息</p>
          <p>
            <span>共&nbsp;{{ tableDatas.length }}&nbsp;个专业类别</span>
          </p>
        </div>
        <div class="nav-right">
          <el-button size="large" round @click="open" color="#d11431" style="color: #fff">
            添加专业
          </el-button>
        </div>
      </div>
    </div>
    <div class="subject-right-body">
      <div class="table">
        <el-table :data="tableDatas" height="74vh" style="width: 100%" empty-text="当前没有专业" @row-click="acs"
          :row-style="{ height: '80px' }">
          <el-table-column prop="direction.directionId" label="专业编号" align="center" />
          <el-table-column prop="direction.directionName" label="专业名称" align="center" sortable />
          <el-table-column prop="nickName" label="教研组组长" align="center" sortable>
            <template #default="scope">
              {{ scope.row.nickName ? scope.row.nickName : '未指定' }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="管理" align="center">
            <template #default="scope">
              <el-tooltip content="修改专业" placement="top">
                <el-button type="info" size="mini" round @click="xiugai(scope.row)" :icon="Edit" />
              </el-tooltip>
              <el-tooltip content="删除当前专业" placement="top">
                <el-button type="danger" size="mini" round @click="shanchu(scope.row)" :icon="Delete" />
              </el-tooltip>

              <el-tooltip content="指定教研组长" placement="top">
                <el-button type="danger" size="mini" round @click="toggleDialog(scope.row)"
                  style="background-color: #ff6c19; opacity: 0.6;" :icon="Avatar" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="添加专业" width="20%">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="专业:">
          <el-input v-model="selectedMajor" style="width: 150px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="tianjia" style="width:15%;">确定</el-button>
          <el-button @click="dialogVisible = false" style="width:15%;">取 消 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改的弹框 -->
    <el-dialog v-model="dialogVisible01" title="修改专业" width="20%">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="专业:">
          <el-input v-model="selectedMajor" style="width: 150px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="queding" style="width:15%;">确定</el-button>
          <el-button @click="dialogVisible01 = false" style="width:15%;">取 消 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 指定教研组长的弹框 -->
    <el-dialog v-model="dialogVisible02" title="指定教研组长" width="20%">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="专业:">
          <el-input v-model="selectedMajor" disabled style="width: 150px;" />
        </el-form-item>
        <el-form-item label="当前指定负责人:">
          <el-input v-model="selectedLeaderName" disabled style="width: 150px;" />
        </el-form-item>
        <el-form-item label="指定教研组长:">
          <el-select v-model="selectedLeaderId" placeholder="请选择老师" @change="handleLeaderChange">
            <el-option v-for="leader in leaders" :key="leader.userId" :label="leader.nickName" :value="leader.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="zhiding" style="width:15%;">确定</el-button>
          <el-button @click="dialogVisible02 = false" style="width:15%;">取 消 </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import { ref } from "vue";
import { Avatar, Plus } from "@element-plus/icons-vue";
import { dataType } from "element-plus/es/components/table-v2/src/common";
import router from "@/router";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive } from 'vue'
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
  Search,
} from "@element-plus/icons-vue";
import {
  updateDirections,
  updateGroupLeader,
  // selectAllDirections,
  addDirections,
  selectAllTeachers
  , selectAllGroupLeader,
  deleteDirections
} from "@/api/teacher/AddClass";
import { select } from "@/api/work";

// 点击指定教研组按钮
const toggleDialog = (row) => {

  console.log("切换弹出框显示状态");
  console.log(row);
// 清空下拉框
  selectedLeaderId.value = '';

  marjorId.value = '';

  selectedMajor.value = row.direction.directionName;

  marjorId.value = row.direction.directionId;

  getTeachers();

  if (row.nickName == null) {
    selectedLeaderName.value = '未指定'
  } else {
    selectedLeaderName.value = row.nickName
  }


  dialogVisible02.value = !dialogVisible02.value;
};


const selectedLeaderId = ref('');
// 控制弹出框
const dialogVisible = ref(false);
const dialogVisible01 = ref(false);
const dialogVisible02 = ref(false);
const id = ref('');
// 修改
const xiugai = (row) => {
  id.value = row.direction.directionId
  console.log(row.direction.directionId);
  // 清空数据
  selectedMajor.value = '';
  selectedMajor.value = row.direction.directionName;
  dialogVisible01.value = true;
};
const queding = async () => {
  console.log(selectedMajor.value);
  // 传入的是一个对象
  const directions = {
    directionId: id.value,
    directionName: selectedMajor.value
  }
  const res = await updateDirections(directions)
  if (res.code == 200) {
    ElMessage.success('修改成功')
    dialogVisible01.value = false;
    getGroupLeader()
  } else {
    ElMessage.error('修改失败')
    dialogVisible01.value = false;
  }
}
// 删除
const shanchu = async (row) => {
  console.log(row.direction.directionId);
  const res = await deleteDirections(row.direction.directionId);
  try {

  } catch (error) {

  }
  if (res.code == 200) {
    ElMessage.success('删除成功')
    getGroupLeader()
  } else {
    ElMessage.error('删除失败')
  }
}

const leaders = ref([]);

// 下拉框选择值
const selectedMajor = ref('');
const marjorId = ref();
const selectedLeaderName = ref('未指定');

// 获取下拉的id值方便指定教研组组长
const selectedLeaderid = ref('');
// 监听下拉框的改变值获取id
const handleLeaderChange = (userId) => {
  selectedLeaderid.value = userId;
  console.log(selectedLeaderid.value);
};
// 指定
const zhiding = async () => {
  let aa = await updateGroupLeader(selectedLeaderid.value, marjorId.value)
  if (aa.code == 200) {
    ElMessage.success('修改成功')
    dialogVisible02.value = false;
    getGroupLeader()
  } else {
    ElMessage.error('修改失败')
    dialogVisible02.value = false;
  }
}
// 班级列表模型
const tableDatas = ref([]);
// 添加专业
const open = () => {
  dialogVisible.value = true;
  selectedMajor.value = '';
  // 清空表单校验数据

};
const tianjia = async () => {
  console.log(selectedMajor.value);
  let res = await addDirections(selectedMajor.value)
  if (res.code == 200) {
    ElMessage.success('添加成功')
    dialogVisible.value = false;
    getGroupLeader()
    selectedMajor.value = ''
  } else {
    ElMessage.error('添加失败')
    dialogVisible.value = false;
  }
};

// 获取所有老师方法
const getTeachers = async () => {
  const res = await selectAllTeachers(marjorId.value)
  console.log("后端发送的老师的数据模型")
  console.log(res.data)
  leaders.value = res.data
}

// getTeachers();

// 专业组组长
const getGroupLeader = async () => {
  const res = await selectAllGroupLeader()
  console.log(res.data)
  tableDatas.value = res.data
  // majors.value = tableDatas.value
}
getGroupLeader();
</script>

<style scoped lang="scss">
@import url(@/assets/font/iconfont.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.resourceTop {
  width: 100%;
  height: 100px;
  background-color: white;
  border: 1px solid #f0f0f0;
  padding: 16px 60px;
}

.resourceTop .logo {
  width: 60px;
  height: 60px;
  background-color: #ff6b0f;
  border-radius: 50%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.resourceTop .logo img {
  width: 60px;
  height: 60px;
  padding: 18px;
}

.resourceTop .text {
  width: 120px;
  height: 100%;
  margin-left: 20px;
  display: inline-block;
}

.resourceTop .text .title007 {
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.resourceTop .text p span {
  color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
  color: #f4523b;
}

.search {
  display: flex;
  float: right;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}

.sousuo {
  width: 40px;
  height: 40px;
  padding: 11px;
  background-color: #fff;
}

.resourceTop .search input {
  width: 320px;
  height: 40px;
  border: none;
  background-color: #fff;
}

.search input:focus {
  outline: none;
}

.search:hover {
  border: 1px solid #FF6B0F;
}

.nav-right {
  float: right;
  width: 95px;
  height: 100%;
  padding: 15px 0;
}

.button-zuzhang {
  float: right;
  width: 95px;
  height: 100%;
  padding: 15px 150px;
}

.subject-right-header {
  width: 100%;
}

.subject-right-body {
  background-color: #eeeeee;
  height: 78.5vh;
  width: 99.9%;
  padding: 24px 60px;
}

.table {
  height: 100px;
  width: 100%;
}

::v-deep .el-table tr:hover {
  cursor: pointer;
}

.custom-margin {
  margin: 10px 0; // 自定义边距
}
</style>